<template>
	<view class="">
		<!-- 使用scroll-view实现tabs滑动切换 -->
		<scroll-view class="top-menu-view" scroll-x="true" :scroll-with-animation="true">
			<view class="menu_box">
				<view class="menu-topic-view" v-for="(item,index) in tabs" :key="index" @click="swichMenu(index)">
					<view :class="currentTab==index? 'menu-topic-act' : ''">
						<text class="menu-topic-text">{{item}}</text>
						<view class="menu-topic-bottom">
							<view class="menu-topic-bottom-color"></view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
	<view class="add_main">
		<view class="truth" v-if="currentTab===0">
			<p class="text_top_popup">生成邀请码</p>
			<p class="tip">生成邀请码复制发送给成员(有效期七天)</p>
			<view class="input_kong">
				<uni-easyinput placeholderStyle="font-size:28rpx;" disabled :clearable="false" :value="inviteCode"
					placeholder="邀请码"></uni-easyinput>
				<span class="copy" @click="copy(inviteCode)" v-if="inviteCode">复制</span>
			</view>
			<button class="onlogout" @click="createCode"><span v-if="!inviteCode">生成</span><span v-else>重新生成</span></button>
		</view>
		<view class="truth" v-else>
			<p class="text_top_popup">短信邀请码</p>
			<p class="tip">填写手机号发送短信邀请码</p>
			<uni-easyinput placeholderStyle="font-size:28rpx;" type="number" v-model="phone" maxlength="11"
				placeholder="手机号"></uni-easyinput>
			<button class="onlogout" @click="addCode"><span>发送</span></button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		onMounted
	} from "vue";
	import apiNetwork from '@/util/network_api/network.js'
	import { onReachBottom, onPullDownRefresh, onUnload, onLaunch, onLoad, onHide, onShow } from '@dcloudio/uni-app'
	const inviteCode = ref('')//邀请码
	const phone = ref('')
	const tabs = ref(['生成邀请码', '短信邀请码'])//标题列表
	const currentTab = ref(0)//当前标题index
	onUnload(()=>{
		uni.hideLoading()
	})
	// Tab切换内容
	async function swichMenu(index) {
		currentTab.value = index
		// uni.showLoading({
		// 	title: '加载中',
		// })
	}
	// 复制
	const copy = (val : any) => {
		if (!val) return
		uni.setClipboardData({
			data: val,
			success: function () {
				//调用方法成功
				uni.showToast({
					title: '已复制',
					icon: 'none'
				})
			},
		})
	}
	// 生成邀请码
	const createCode = async () => {
		uni.showLoading({
			title: "加载中...",
			mask:true
		})
		await apiNetwork.getInviteCode().then(res => {
			if (res.code == 20000) {
				inviteCode.value = res.data.row.engineerInviteCode
			}
		})
		uni.hideLoading()
	}
	// 发送邀请码
	const addCode = async () => {
		if (!/^1[^1^2]\d{9}$/.test(phone.value)) {
			uni.showToast({
				title: '请输入正确的手机号!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		uni.showLoading({
			title: "加载中...",
			mask:true
		})
		await apiNetwork.sendInviteCode({ phone: phone.value }).then(res => {
			
		})
		uni.hideLoading()
	}
</script>

<style lang="scss" scoped>
	.top-menu-view {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		height: 86rpx;
		line-height: 86rpx;
		// border-top: 1rpx solid #d8dbe6;
		border-bottom: 1rpx solid #d8dbe6;

		.menu_box {
			display: flex;
			align-items: center;
			justify-content: space-around;
		}

		.menu-topic-view {
			display: inline-block;
			white-space: nowrap;
			height: 86rpx;
			position: relative;

			.menu-topic-text {
				font-size: 28rpx;
				color: #303133;
				padding: 0rpx 10rpx;
				margin: 0 30rpx;
				position: relative;
				z-index: 2;
				border-radius: 10rpx;

			}

			.menu-topic-bottom {
				position: absolute;
				bottom: 4rpx;
				width: 100%;

				.menu-topic-bottom-color {
					width: 40rpx;
					height: 4rpx;
				}
			}

			.menu-topic-act {
				.menu-topic-text {
					font-weight: 700;
					color: #007cff;
				}

				.menu-topic-bottom {
					display: flex;
					justify-content: center;
				}

				.menu-topic-bottom-color {
					background: #007cff;
				}
			}
		}
	}

	.add_main {
		background-color: #fafafa;
		padding-top: 40rpx;

		.truth {
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 40rpx;

			.text_top_popup {
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
			}

			.tip {
				font-size: 24rpx;
				color: #999;
				padding: 24rpx;
			}

			.input_kong {
				width: 100%;
				display: flex;
				align-items: center;
				position: relative;

				:deep(.is-disabled) {
					color: #303133;
				}

				.copy {
					position: absolute;
					right: 24rpx;
					color: #007cff;
					font-size: 28rpx;
					z-index: 2;
				}
			}

			.onlogout {
				font-size: 28rpx;
				margin-top: 30rpx;
				height: 80rpx;
				border-radius: 50rpx;
				line-height: 80rpx;
				width: 100%;
				color: #fff;
				background-color: #007cff;
				font-weight: bold;
			}

			:deep(.is-input-border) {
				border-radius: 50rpx !important;
				background-color: rgba(243, 244, 248, 1) !important;
				padding: 10rpx;
				margin: 20rpx 0 20rpx;
				border: none;
				height: 80rpx !important;
				line-height: 80rpx;
				font-size: 28rpx
			}
		}
	}
</style>